<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- title动态绑定为组件中的message数据 -->
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>

    <script>

        const Root = {
            data(){
                return {
                    message:"hello at " + new Date()
                }
            },

            // 组件挂载完毕后
            mounted(){
                // 开启一个定时器 每秒更新一下组件的message数据
                setInterval(() => {
                    // this者 当前组件实例也
                    this.message = "hello at " + new Date()
                }, 1000);
            }
        }

        Vue.createApp(Root).mount("#app")
    </script>
</body>

</html>